<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="User" name="first">User</el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
      <el-tab-pane label="Tasks" name="five">
        <Test :foo="fx"></Test>
        <el-button @click='cf'>刷新</el-button>
      </el-tab-pane>
    </el-tabs>
  </template>
  <script setup>
  import { ref } from 'vue'
//   import { TabsPaneContext } from 'element-plus'
  
  const activeName = ref('first')

  const fx=ref(2);

  function cf(){
    fx.value++;
  }
  
  const handleClick = (tab, event) => {
    console.log(tab, event)
  }
  </script>
  <style>
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  </style>
  